<template lang="html">
  <div class="box">
      <div class="header">
          <el-tabs v-model="activeName" @tab-click="switchTabBar()">
              <el-tab-pane label="保单列表" name="1"></el-tab-pane>
              <el-tab-pane label="保单预警" name="2"></el-tab-pane>
          </el-tabs>
      </div>
      <div class="body">
          <el-form class="filterCondition demo-form-inline" :inline="true" label-width="80px">
              <el-input placeholder="输入车主姓名/联系方式" v-model="keyword" style="width: 420px;">
                <el-button slot="append" style="width: 120px;" @click="search()">搜索</el-button>
              </el-input>
          </el-form>
          <div class="table_box" v-show="activeName==1">
              <el-table :data="tableData.list" style="width: 100%">
                  <el-table-column  prop="name" align="center" label="车主姓名" ></el-table-column>
                  <el-table-column  prop="phone"  align="center" label="联系方式" ></el-table-column>
                  <el-table-column  prop="u_plate"  align="center" label="车牌号" ></el-table-column>
                  <el-table-column  prop="vin"  align="center" label="vin码" ></el-table-column>
                  <el-table-column  align="center" label="保单信息" >
                      <template slot-scope="scope">
                          <el-button type="primary" @click="viewInfo(scope.row)" slot="reference" plain size="mini">查看详情</el-button>
                      </template>
                  </el-table-column>
                  <el-table-column  align="center" label="保单状态" >
                      <template slot-scope="scope">
                          <p v-if="scope.row.status==0">等待审核</p>
                          <p v-if="scope.row.status==1">审核通过</p>
                          <p v-if="scope.row.status==2">已过期</p>
                          <p v-if="scope.row.status==3">被驳回</p>
                      </template>
                  </el-table-column>
                  <el-table-column  prop="audit_time"  align="center" label="审核时间" ></el-table-column>
              </el-table>
          </div>
          <div class="table_box" v-show="activeName==2">
            <el-table :data="tableData.list" style="width: 100%">
                <el-table-column prop="name" align="center" label="车主姓名" ></el-table-column>
                <el-table-column prop="phone"  align="center" label="联系方式" ></el-table-column>
                <el-table-column prop="policy_num"  align="center" label="保单号" ></el-table-column>
                <el-table-column prop="start_time"  align="center" label="投保日期" ></el-table-column>
                <el-table-column prop="end_time"  align="center" label="截止时间" ></el-table-column>
                <el-table-column align="center" label="是否提醒" >
                    <template slot-scope="scope">
                      <p v-if="scope.row.remind_status == 0">未提醒</p>
                      <p v-if="scope.row.remind_status == 1">已提醒</p>
                    </template>
                </el-table-column>
                <el-table-column prop="audit_time"  align="center" label="操作" >
                  <template slot-scope="scope">
                      <p v-if="scope.row.remind_status == 1">--</p>
                      <el-button type="text" v-if="scope.row.remind_status == 0" @click="functionTips(scope.row)" size="small">提醒</el-button>
                  </template>
                </el-table-column>
            </el-table>
          </div>

      </div>
      <div class="page_box">
          <el-pagination class="page" layout="prev, pager, next"
            @current-change="changePage" :current-page="currentPage" :page-count='tableData.rows' >
          </el-pagination>
      </div>
      <div class="">
        <el-dialog title="保单信息详情" :visible.sync="dialogTableVisible">
            <el-table :data="gridData.list">
                <el-table-column align="center" property="policy_num" label="保单号"></el-table-column>
                <el-table-column align="center" property="start_time" label="投保时间"></el-table-column>
                <el-table-column align="center" property="end_time" label="截止时间"></el-table-column>
                <el-table-column align="center" property="company" label="险种">
                    <template slot-scope="scope">
                        <el-popover trigger="click" placement="top">
                          <div style="line-height:25px" v-for="item,i in scope.row.name_price" :key="i">
                            <p>名称: {{item.type}}</p>
                            <p>金额: {{item.value}}</p>
                          </div>
                          <p>总金额: {{ scope.row.total }}</p>
                          <el-button type="primary" slot="reference" size="mini" plain>点击查看</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="保单图片">
                  <template slot-scope="scope">
                    <el-button type="primary" @click="onImages(scope.row.pc_img)" size="mini" plain>点击查看</el-button>
                  </template>
                </el-table-column>
            </el-table>
        </el-dialog>
      </div>
      <el-dialog title="保单图片" :visible.sync="dialogTableVisible1">
          <div class="photos">
              <p v-for="i,k in images" :key="k"><img :src="i" :preview="i" alt="" /></p>
          </div>
      </el-dialog>

  </div>
</template>

<script>
export default {
  data(){
    return {
      activeName:'1',
      active:'1',
      keyword:'',
      tableData:[],
      gridData:[],
      images:[],
      currentPage:1,
      dialogTableVisible:false,
      dialogTableVisible1:false
    }
  },
  created(){
    this.switchs()
    this.$preview.on('imageLoadComplete',(e,item)=>{
    	this.$preview.self.template.style.zIndex = 99999
    })
  },
  methods:{
    search(){
      this.switchs()
    },
    switchTabBar(){
      if(this.activeName == this.active){
        return false;
      }
      this.active = this.activeName
      this.currentPage = 1;
      this.tableData = []
      this.switchs()
    },
    viewInfo(e){
      this.dialogTableVisible = true;
      this.$http4.bbyDetailed({
        pid: e.pid
      }).then(res=>{
        this.gridData =
        res.data.code == 1 ?
        res.data.data:[];
      })
    },
    onImages(str){
      var data = JSON.parse(str);
      if(data.length > 0){
        this.dialogTableVisible1 = true;
        this.images = data;
        this.$previewRefresh();
      }else{
        this.$message.error('没有保单图片')
      }
    },
    switchs(page=1){
      var obj = {
          key:this.keyword,
          page:page
      };
      this.currentPage = page;
      switch(this.activeName){
        case '1': //保单列表
          this.bbyPassList(obj)
        break;
        case '2': //保单预警
          this.bbyYjList(obj)
        break;
      }
    },
    bbyPassList(obj){
      this.$http4.bbyPassList(obj).then(res=>{
        this.tableData = res.data.code== 1?
        res.data.data:[]
      })
    },
    bbyYjList(obj){
      this.$http4.bbyYjList(obj).
      then(res=>{
        this.tableData = res.data.code== 1?
        res.data.data:[]
      })
    },
    changePage(p){
      this.switchs(p)
    },
    functionTips(e){
      this.$confirm('您确定提醒吗？').then(_=>{
          this.$http4.bbyRemind({
            pid:e.pid
          }).then(res=>{
            if(res.data.code == 1){
              this.$message.success(res.data.msg)
              this.switchs()
            }else{
              this.$message.error(res.data.msg)
            }
          })
      }).catch(_=>{})

    }

  }
}
</script>

<style lang="css" scoped>
@import "../../../my-style/app.css";

/deep/ .el-input-group__append, .el-input-group__prepend{
  background-color: #3498E9;
  border: none;
  color: white;
}

.preview-img{
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  overflow: hidden;
}
.header{
  margin-bottom: 10px
}
.page_box{
  text-align: center;
}
.photos{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.photos p {
  width: 20%;
}
.photos p img{
  width: 100%;
  display: block;
}
</style>
